<template>
  <div class="container-big flexcolumn">
    <CommnityHeader
      title="标签拉群"
      :type="3"
      :showexample="false"
      :isSingle="true"
    />
    <div class="content-big flex">
      <div class="content-left">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          class="flexbetween bg_fff p-10 fborderb"
        >
          <div class="flex aligncenter">
            <el-button v-hasPermi="['single:taginvite:addtask']" type="primary" size="small" @click="handerAddTask">
              <i class="el-icon-plus mr-8"></i>新建任务
            </el-button>
            <div v-hasPermi="['single:taginvite:set']"
              class="setbox bg_fff commhover ml-8 flexcenter"
              @click="handleSet"
            >
              <i class="el-icon-setting"></i>
            </div>
          </div>
          <el-form-item prop="name" class="mb-0 mr-0">
            <el-input
              placeholder="搜任务"
              v-model="queryParams.name"
              @keyup.enter.native="handleQuery"
              class="x-input-select"
              style="width: 172px"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="kw_tab">
          <el-tab-pane
            v-for="(item, index) in tabList"
            :key="index"
            :label="item.label"
            :name="item.value"
          >
          </el-tab-pane>
        </el-tabs>
        <div class="listbox p-12">
          <div
            v-if="newPlan"
            class="content-item bg_fff p-12 commhover br_4 mb-8"
            :class="{ active: rowItem && newPlan.id == rowItem.id }"
          >
            <div class="content-top flexbetween c_text2">
              <div class="title line_h_22">{{ newPlan.title || "--" }}</div>
            </div>
            <div class="line_h_22 c_text3 f-12">
              id:{{ newPlan.id || "--" }}
            </div>
          </div>
          <div
            v-for="(item, index) in dataList"
            :key="index"
            class="content-item bg_fff p-12 commhover br_4 mb-8"
            :class="{ active: rowItem && item.id == rowItem.id }"
            @click="handleItem(item)"
          >
            <div class="content-top flexbetween c_text2">
              <div class="title line_h_22">{{ item.title || "--" }}</div>
              <div class="f-14 flex aligncenter">
                <!-- <span @click="handleManage(item)">管理</span> -->
                <el-switch
                  v-hasPermi="['single:taginvite:changestatus']"
                  v-model="item.status"
                  active-color="#3070ff"
                  inactive-color="#c7c5c5"
                  :active-value="1"
                  :inactive-value="0"
                  class="mr-6 mini-switch"
                >
                </el-switch>
                <el-dropdown v-hasPermi="['single:taginvite:delete']"
                  click="mr-10"
                  @command="handleCommand($event, item)"
                >
                  <i class="el-icon-more pr-5 f-12"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <div class="line_h_22 c_text3 f-12">
              id:1106164
              <span class="pl-12">多客户任务</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content-right bg_fff">
        <addOrEditUserOperations
          :key="datakey"
          :info="rowItem"
        ></addOrEditUserOperations>
      </div>
    </div>
    <!-- 设置-->
    <editSendSettings
      v-if="showEditSendSettings"
      :visableIf.sync="showEditSendSettings"
    ></editSendSettings>
    <!-- 管理 -->
    <!-- <plan-manage v-if="openmanage" :visableIf.sync="openmanage" :row="mitem" /> -->
    <select-plan v-if="showplan" :visableIf.sync="showplan" />
  </div>
</template>

<script>
import { listUser, delUser } from "@/api/system/user";
// import PlanManage from "../components/PlanManage.vue";
// import SelectPlan from "@/components/UserGroupComp/SelectPlan.vue";
import CommnityHeader from "@/views/communityOperation/components/CommnityHeader.vue";
export default {
  name: "newUserOperationsList",
  components: {
    editSendSettings: () => import("@/views/communityOperation/components/editSendSettings.vue"), //
    addOrEditUserOperations: () => import("./addOrEditUserOperations.vue"), //
    // PlanManage, //方案管理
    // SelectPlan, //批量应用
    CommnityHeader,
  },
  data() {
    return {
      activeName: "1",
      tabList: [
        { label: "全部", value: "1" },
        { label: "多客户任务", value: "2" },
        { label: "单客户任务", value: "3" },
      ],
      showEditSendSettings: false,
      rowItem: null,
      datakey: "",
      dataList: [
        { id: 1, title: "方案一" },
        { id: 2, title: "方案二" },
      ],
      newPlan: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        id: null, //用户id
        userName1: null,
      },
      total: 8, // 表格的总条数
      openmanage: false, //方案管理
      mitem: null,
      showplan: false,
    };
  },
  created() {},
  methods: {
    handleClick() {},

    handerAddTask() {
      if (!this.newPlan) {
        this.newPlan = {
          title: "新任务",
          id: -1,
          planName: "任务" + (this.dataList.length + 1),
        };
        this.handleItem(this.newPlan, "add");
      }
    },

    handleItem(item, type = "") {
      if (this.newPlan && !type) {
        this.$msgBox
          .showMsgBox({
            title: "现在离开将不保存新建任务",
            content: "",
          })
          .then(() => {
            this.newPlan = null;
            this.handleItem(item);
          })
          .catch(() => {});
      } else {
        this.rowItem = item;
        this.datakey = Date.now();
      }
    },

    handleSet() {
      this.showEditSendSettings = true;
    },

    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.tableDataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.handleQuery();
    },

    handleManage(item) {
      this.mitem = item;
      this.openmanage = true;
    },

    handleApplicate() {
      this.showplan = true;
    },

    handleCommand(type, item) {
      switch (type) {
        case "a":
          this.handleDelete(item);
          break;

        default:
          break;
      }
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      this.$msgBox
        .showMsgBox({
          title: "提示",
          content:
            "此处删除会同步删除已应用到各个企微号下的该入群欢迎语任务，请谨慎操作。",
        })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.container-big {
  height: calc(100vh - 48px);
}
.content-big {
  height: calc(100% - 46px);
  .content-left {
    width: 384px;
    height: 100%;
    .setbox {
      width: 28px;
      height: 28px;
      border-radius: 2px;
      border: 1px solid #e9e9e9;
    }
    .content-item {
      border: 1px solid #e9e9e9;
      &.active {
        border: 1px solid #3070ff;
        background: #ebf2ff;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
      }
      .mgt {
        border: 1px solid #eee;
        height: 24px;
        line-height: 24px;
        span {
          padding: 0 7px;
          margin-right: 5px;
          border-right: 1px solid #eee;
        }
      }
    }
  }
  .content-right {
    flex: 1;
    border-left: 1px solid #e9e9e9;
    width: calc(100% - 384px);
  }
}
.listbox {
  height: calc(100% - 52px - 40px);
  overflow-y: auto;
}
.kw_tab {
  ::v-deep .el-tabs__header {
    background-color: #fff;
    margin: 0;
  }
  ::v-deep .el-tabs__nav-wrap {
    padding-left: 20px;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #e9e9e9;
  }
}
.fborderb {
  height: 50px;
  border-bottom: 1px solid #e9e9e9;
}
</style>
